<template>
    <div class="homes">
        <van-nav-bar title="工信部测评数据">
            <template #right>
                <div class="select-data" @click="selectClick">{{selectData}}</div>
            </template>
        </van-nav-bar>
        <div class="tab-change">
            <span v-for="(item,index) in tabs" :key="index" :class="active == index?'tab-select':'tab-unselect'" @click="tabClick(index)">{{item.text}}</span>
        </div>
        <div class="content-part" id="scroll-container">
            <!-- <div class="list-item">
                <div class="title-s">
                    <i class="line"></i>
                    <span>营销宣传</span>
                </div>
            </div> -->
            <cardPanel v-for="(item,index) in dataList" :key="index" @onDrillDown="onDrillDown" :cardAttrs="item" />
        </div>

        <van-popup v-model:show="showPicker" position="bottom">
            <van-picker v-model="selectedValues" title="选择期数" @change="handleChangeArea" @cancel="showPicker = false" @confirm="onConfirm" :columns="columns" />
        </van-popup>
    </div>
</template>
<script>
import { reactive, toRefs, onMounted } from "vue"
import { useRouter, useRoute } from "vue-router"
import cardPanel from "@/components/cardPanel.vue"
import dataUtil from "@/utils/dataUtil"
import NumberUtil from "@/utils/NumberUtil"
import GetNetUtil from "../../../utils/GetNetUtil"
import moment from "moment"
export default {
    components: {
        cardPanel
    },
    setup() {
        const router = useRouter()
        const state = reactive({
            tabs: [
                {
                    text: "关键指标",
                    value: 1
                },
                {
                    text: "移动业务",
                    value: 2
                },
                {
                    text: "固定上网",
                    value: 3
                },
                {
                    text: "固定语音",
                    value: 4
                }
            ],
            selectedValues: "",
            columns: [],
            selectData: "",
            dataList: [],
            active: 0,
            showPicker: false,
            type: "1",
            showLoading: false
        })
        //获取最大日期
        getMaxDate()
        //点击日期
        function selectClick() {
            state.showPicker = true
        }
        async function getMaxDate() {
            GetNetUtil.requestPost("/gxb/getMaxDate", "", "", getMaxDate)
            async function getMaxDate(resp) {
                if (resp.resultCode === "200") {
                    console.log(resp)
                    state.selectData = resp.data
                    dataList1(state.selectData, state.type)
                } else {
                    console.log("查询最大日期出错", resp)
                }
            }
        }
        function onDrillDown(val) {
            console.log(val.num, "Ssss")
            if (state.active == 1) {
                state.type = "2"
                if("明细"==val.num){
                    dataList2(state.selectData, state.type, val.num)
                }else{
                    dataList2_1(state.selectData, state.type, val.num);
                }
            } else if (state.active == 2) {
                state.type = "3"
                if("明细"==val.num){
                    dataList3(state.selectData, state.type, val.num)
                }else{
                    dataList3_1(state.selectData, state.type, val.num);
                }
            } else if (state.active == 3) {
                state.type = "4"
                if("明细"==val.num){
                    dataList4(state.selectData, state.type, val.num)
                }else{
                    dataList4_1(state.selectData, state.type, val.num);
                }
            }
        }
        function dataList1(data, type) {
            state.dataList = []
            GetNetUtil.requestPost(
                "/gxb/getGxbInfo",
                "",
                { statDate: data, type: type },
                getGxbInfo
            )
            async function getGxbInfo(resp) {
                if (resp.resultCode === "200") {
                    console.log(resp)
                    if (null == resp.data) {
                        state.dataList = dataUtil.getDataList1()
                    } else {
                        state.dataList = [
                            {
                                name: "综合满意度",
                                num: "--",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea3 == null
                                            ? "--"
                                            : resp.data.mea3,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea4 == null
                                            ? "--"
                                            : resp.data.mea4
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea1 == null
                                            ? "--"
                                            : resp.data.mea1,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea2 == null
                                            ? "--"
                                            : resp.data.mea2
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2:
                                        resp.data.mea5 == null
                                            ? "--"
                                            : resp.data.mea5,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea6 == null
                                            ? "--"
                                            : resp.data.mea6
                                }
                            },
                            {
                                name: "总体感知",
                                num: "--",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea14 == null
                                            ? "--"
                                            : resp.data.mea14,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea15 == null
                                            ? "--"
                                            : resp.data.mea15
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea12 == null
                                            ? "--"
                                            : resp.data.mea12,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea13 == null
                                            ? "--"
                                            : resp.data.mea13
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2:
                                        resp.data.mea16 == null
                                            ? "--"
                                            : resp.data.mea16,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea17 == null
                                            ? "--"
                                            : resp.data.mea17
                                }
                            },
                            {
                                name: "网络质量",
                                num: "--",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea25 == null
                                            ? "--"
                                            : resp.data.mea25,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea26 == null
                                            ? "--"
                                            : resp.data.mea26
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea23 == null
                                            ? "--"
                                            : resp.data.mea23,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea24 == null
                                            ? "--"
                                            : resp.data.mea24
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2:
                                        resp.data.mea27 == null
                                            ? "--"
                                            : resp.data.mea27,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea28 == null
                                            ? "--"
                                            : resp.data.mea28
                                }
                            },
                            {
                                name: "宣传营销",
                                num: "--",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea36 == null
                                            ? "--"
                                            : resp.data.mea36,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea37 == null
                                            ? "--"
                                            : resp.data.mea37
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea34 == null
                                            ? "--"
                                            : resp.data.mea34,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea35 == null
                                            ? "--"
                                            : resp.data.mea35
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2:
                                        resp.data.mea38 == null
                                            ? "--"
                                            : resp.data.mea38,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea39 == null
                                            ? "--"
                                            : resp.data.mea39
                                }
                            },
                            {
                                name: "服务质量",
                                num: "--",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea47 == null
                                            ? "--"
                                            : resp.data.mea47,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea48 == null
                                            ? "--"
                                            : resp.data.mea48
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea45 == null
                                            ? "--"
                                            : resp.data.mea45,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea46 == null
                                            ? "--"
                                            : resp.data.mea46
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2:
                                        resp.data.mea49 == null
                                            ? "--"
                                            : resp.data.mea49,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea50 == null
                                            ? "--"
                                            : resp.data.mea50
                                }
                            }
                        ]
                    }
                } else {
                    console.log("关键指标数据出错", resp)
                }
            }
        }
        function dataList2(data, type, text) {
            state.dataList = []
            GetNetUtil.requestPost(
                "/gxb/getGxbInfo",
                "",
                { statDate: data, type: type },
                getGxbInfo
            )
            async function getGxbInfo(resp) {
                if (resp.resultCode === "200") {
                    console.log(resp)
                    if (null == resp.data) {
                        state.dataList = dataUtil.getDataList2()
                    } else {
                        state.dataList = [
                            {
                                name: "移动业务满意度",
                                num: text,
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea3 == null
                                            ? "--"
                                            : resp.data.mea3,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea4 == null
                                            ? "--"
                                            : resp.data.mea4
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea39 == null
                                            ? "--"
                                            : resp.data.mea39,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea40 == null
                                            ? "--"
                                            : resp.data.mea40
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea3*10000 - resp.data.mea39*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "总体感知",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea9 == null
                                            ? "--"
                                            : resp.data.mea9,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea10 == null
                                            ? "--"
                                            : resp.data.mea10
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea45 == null
                                            ? "--"
                                            : resp.data.mea45,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea46 == null
                                            ? "--"
                                            : resp.data.mea46
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea9*100 - resp.data.mea45*100)/100).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "网络质量",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea11 == null
                                            ? "--"
                                            : resp.data.mea11,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea12 == null
                                            ? "--"
                                            : resp.data.mea12
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea47 == null
                                            ? "--"
                                            : resp.data.mea47,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea48 == null
                                            ? "--"
                                            : resp.data.mea48
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea11*10000 - resp.data.mea47*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "营销宣传",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea13 == null
                                            ? "--"
                                            : resp.data.mea13,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea14 == null
                                            ? "--"
                                            : resp.data.mea14
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea49 == null
                                            ? "--"
                                            : resp.data.mea49,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea50 == null
                                            ? "--"
                                            : resp.data.mea50
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea13*10000 - resp.data.mea49*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "服务质量",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea15 == null
                                            ? "--"
                                            : resp.data.mea15,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea16 == null
                                            ? "--"
                                            : resp.data.mea16
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea51 == null
                                            ? "--"
                                            : resp.data.mea51,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea52 == null
                                            ? "--"
                                            : resp.data.mea52
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea15*10000 - resp.data.mea51*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            }
                        ]
                    }
                } else {
                    console.log("关键指标数据出错", resp)
                }
            }
        }
        function dataList3(data, type, text) {
            state.dataList = []
            GetNetUtil.requestPost(
                "/gxb/getGxbInfo",
                "",
                { statDate: data, type: type },
                getGxbInfo
            )
            async function getGxbInfo(resp) {
                if (resp.resultCode === "200") {
                    console.log(resp)
                    if (null == resp.data) {
                        state.dataList = dataUtil.getDataList3()
                    } else {
                        state.dataList = [
                            {
                                name: "固定上网满意度",
                                num: text,
                                firstItem: {
                                    text1: "表现值",
                                    text2: resp.data.mea3,
                                    text3: "排名",
                                    text4: resp.data.mea4
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2: resp.data.mea39,
                                    text3: "排名",
                                    text4: resp.data.mea40
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea3*10000 - resp.data.mea39*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "总体感知",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2: resp.data.mea9,
                                    text3: "排名",
                                    text4: resp.data.mea10
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2: resp.data.mea45,
                                    text3: "排名",
                                    text4: resp.data.mea46
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea9*10000 - resp.data.mea45*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "网络质量",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2: resp.data.mea11,
                                    text3: "排名",
                                    text4: resp.data.mea12
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2: resp.data.mea47,
                                    text3: "排名",
                                    text4: resp.data.mea48
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea11*10000 - resp.data.mea47*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "营销宣传",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2: resp.data.mea13,
                                    text3: "排名",
                                    text4: resp.data.mea14
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2: resp.data.mea49,
                                    text3: "排名",
                                    text4: resp.data.mea50
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea13*10000 - resp.data.mea49*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "服务质量",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2: resp.data.mea15,
                                    text3: "排名",
                                    text4: resp.data.mea16
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2: resp.data.mea51,
                                    text3: "排名",
                                    text4: resp.data.mea52
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea15*10000 - resp.data.mea51*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            }
                        ]
                    }
                } else {
                    console.log("关键指标数据出错", resp)
                }
            }
        }
        function dataList4(data, type, text) {
            state.dataList = []
            GetNetUtil.requestPost(
                "/gxb/getGxbInfo",
                "",
                { statDate: data, type: type },
                getGxbInfo
            )
            async function getGxbInfo(resp) {
                if (resp.resultCode === "200") {
                    console.log(resp)
                    if (null == resp.data) {
                        state.dataList = dataUtil.getDataList4()
                    } else {
                        state.dataList = [
                            {
                                name: "固定话音满意度",
                                num: text,
                                firstItem: {
                                    text1: "表现值",
                                    text2: resp.data.mea3,
                                    text3: "排名",
                                    text4: resp.data.mea4
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2: resp.data.mea39,
                                    text3: "排名",
                                    text4: resp.data.mea40
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea3*10000 - resp.data.mea39*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "总体感知",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2: resp.data.mea9,
                                    text3: "排名",
                                    text4: resp.data.mea10
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2: resp.data.mea45,
                                    text3: "排名",
                                    text4: resp.data.mea46
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea9*10000 - resp.data.mea45*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "网络质量",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2: resp.data.mea11,
                                    text3: "排名",
                                    text4: resp.data.mea12
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2: resp.data.mea47,
                                    text3: "排名",
                                    text4: resp.data.mea48
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea11*10000 - resp.data.mea47*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "营销宣传",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2: resp.data.mea13,
                                    text3: "排名",
                                    text4: resp.data.mea14
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2: resp.data.mea49,
                                    text3: "排名",
                                    text4: resp.data.mea50
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea13*10000 - resp.data.mea49*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "服务质量",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2: resp.data.mea15,
                                    text3: "排名",
                                    text4: resp.data.mea16
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2: resp.data.mea51,
                                    text3: "排名",
                                    text4: resp.data.mea52
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea15*10000 - resp.data.mea51*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            }
                        ]
                    }
                } else {
                    console.log("关键指标数据出错", resp)
                }
            }
        }

        //移动业务明细
        function dataList2_1(data, type, text) {
            state.dataList = []
            GetNetUtil.requestPost(
                "/gxb/getGxbInfo",
                "",
                { statDate: data, type: type },
                getGxbInfo
            )
            async function getGxbInfo(resp) {
                if (resp.resultCode === "200") {
                    console.log(resp)
                    if (null == resp.data) {
                        state.dataList = dataUtil.getDataList21()
                    } else {
                        state.dataList = [
                            {
                                name: "话音质量",
                                num: text,
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea17 == null
                                            ? "--"
                                            : resp.data.mea17,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea18 == null
                                            ? "--"
                                            : resp.data.mea18
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea53 == null
                                            ? "--"
                                            : resp.data.mea53,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea54 == null
                                            ? "--"
                                            : resp.data.mea54
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea17*10000 - resp.data.mea53*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "上网质量",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea19 == null
                                            ? "--"
                                            : resp.data.mea19,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea20 == null
                                            ? "--"
                                            : resp.data.mea20
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea55 == null
                                            ? "--"
                                            : resp.data.mea55,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea56 == null
                                            ? "--"
                                            : resp.data.mea56
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea19*10000 - resp.data.mea55*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "宣传推广",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea21 == null
                                            ? "--"
                                            : resp.data.mea21,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea22 == null
                                            ? "--"
                                            : resp.data.mea22
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea57 == null
                                            ? "--"
                                            : resp.data.mea57,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea58 == null
                                            ? "--"
                                            : resp.data.mea58
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea21*10000 - resp.data.mea57*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "业务规则",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea23 == null
                                            ? "--"
                                            : resp.data.mea23,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea24 == null
                                            ? "--"
                                            : resp.data.mea24
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea59 == null
                                            ? "--"
                                            : resp.data.mea59,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea60 == null
                                            ? "--"
                                            : resp.data.mea60
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea23*10000 - resp.data.mea59*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "明白消费",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea25 == null
                                            ? "--"
                                            : resp.data.mea25,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea26 == null
                                            ? "--"
                                            : resp.data.mea26
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea61 == null
                                            ? "--"
                                            : resp.data.mea61,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea62 == null
                                            ? "--"
                                            : resp.data.mea62
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea25*10000 - resp.data.mea61*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "营业厅",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea29 == null
                                            ? "--"
                                            : resp.data.mea29,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea30 == null
                                            ? "--"
                                            : resp.data.mea30
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea65 == null
                                            ? "--"
                                            : resp.data.mea65,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea66 == null
                                            ? "--"
                                            : resp.data.mea66
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea29*10000 - resp.data.mea65*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "客服热线",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea31 == null
                                            ? "--"
                                            : resp.data.mea31,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea32 == null
                                            ? "--"
                                            : resp.data.mea32
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea67 == null
                                            ? "--"
                                            : resp.data.mea67,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea68 == null
                                            ? "--"
                                            : resp.data.mea68
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea31*10000 - resp.data.mea67*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "电子渠道",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea33 == null
                                            ? "--"
                                            : resp.data.mea33,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea34 == null
                                            ? "--"
                                            : resp.data.mea34
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea69 == null
                                            ? "--"
                                            : resp.data.mea69,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea70 == null
                                            ? "--"
                                            : resp.data.mea70
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea33*10000 - resp.data.mea69*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            }
                        ]
                    }
                } else {
                    console.log("关键指标数据出错", resp)
                }
            }
        }
        //固定上网明细
        function dataList3_1(data, type, text) {
            state.dataList = []
            GetNetUtil.requestPost(
                "/gxb/getGxbInfo",
                "",
                { statDate: data, type: type },
                getGxbInfo
            )
            async function getGxbInfo(resp) {
                if (resp.resultCode === "200") {
                    console.log(resp)
                    if (null == resp.data) {
                        state.dataList = dataUtil.getDataList31()
                    } else {
                        state.dataList = [
                            {
                                name: "上网质量",
                                num: text,
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea19 == null
                                            ? "--"
                                            : resp.data.mea19,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea20 == null
                                            ? "--"
                                            : resp.data.mea20
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea55 == null
                                            ? "--"
                                            : resp.data.mea55,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea56 == null
                                            ? "--"
                                            : resp.data.mea56
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea19*10000 - resp.data.mea55*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "宣传推广",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea21 == null
                                            ? "--"
                                            : resp.data.mea21,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea22 == null
                                            ? "--"
                                            : resp.data.mea22
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea57 == null
                                            ? "--"
                                            : resp.data.mea57,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea58 == null
                                            ? "--"
                                            : resp.data.mea58
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea21*10000 - resp.data.mea57*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "业务规则",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea23 == null
                                            ? "--"
                                            : resp.data.mea23,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea24 == null
                                            ? "--"
                                            : resp.data.mea24
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea59 == null
                                            ? "--"
                                            : resp.data.mea59,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea60 == null
                                            ? "--"
                                            : resp.data.mea60
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea23*10000 - resp.data.mea59*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "明白消费",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea25 == null
                                            ? "--"
                                            : resp.data.mea25,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea26 == null
                                            ? "--"
                                            : resp.data.mea26
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea61 == null
                                            ? "--"
                                            : resp.data.mea61,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea62 == null
                                            ? "--"
                                            : resp.data.mea62
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea25*10000 - resp.data.mea61*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "营业厅",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea29 == null
                                            ? "--"
                                            : resp.data.mea29,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea30 == null
                                            ? "--"
                                            : resp.data.mea30
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea65 == null
                                            ? "--"
                                            : resp.data.mea65,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea66 == null
                                            ? "--"
                                            : resp.data.mea66
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea29*10000 - resp.data.mea65*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "客服热线",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea31 == null
                                            ? "--"
                                            : resp.data.mea31,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea32 == null
                                            ? "--"
                                            : resp.data.mea32
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea67 == null
                                            ? "--"
                                            : resp.data.mea67,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea68 == null
                                            ? "--"
                                            : resp.data.mea68
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea31*10000 - resp.data.mea67*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "电子渠道",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea33 == null
                                            ? "--"
                                            : resp.data.mea33,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea34 == null
                                            ? "--"
                                            : resp.data.mea34
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea69 == null
                                            ? "--"
                                            : resp.data.mea69,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea70 == null
                                            ? "--"
                                            : resp.data.mea70
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea33*10000 - resp.data.mea69*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "安装维修",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea35 == null
                                            ? "--"
                                            : resp.data.mea35,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea36 == null
                                            ? "--"
                                            : resp.data.mea36
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea71 == null
                                            ? "--"
                                            : resp.data.mea71,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea72 == null
                                            ? "--"
                                            : resp.data.mea72
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea35*10000 - resp.data.mea71*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            }
                        ]
                    }
                } else {
                    console.log("关键指标数据出错", resp)
                }
            }
        }
        //固定话音明细
        function dataList4_1(data, type, text) {
            state.dataList = []
            GetNetUtil.requestPost(
                "/gxb/getGxbInfo",
                "",
                { statDate: data, type: type },
                getGxbInfo
            )
            async function getGxbInfo(resp) {
                if (resp.resultCode === "200") {
                    console.log(resp)
                    if (null == resp.data) {
                        state.dataList = dataUtil.getDataList41()
                    } else {
                        state.dataList = [
                            {
                                name: "话音质量",
                                num: text,
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea17 == null
                                            ? "--"
                                            : resp.data.mea17,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea18 == null
                                            ? "--"
                                            : resp.data.mea18
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea53 == null
                                            ? "--"
                                            : resp.data.mea53,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea54 == null
                                            ? "--"
                                            : resp.data.mea54
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea17*10000 - resp.data.mea53*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "宣传推广",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea21 == null
                                            ? "--"
                                            : resp.data.mea21,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea22 == null
                                            ? "--"
                                            : resp.data.mea22
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea57 == null
                                            ? "--"
                                            : resp.data.mea57,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea58 == null
                                            ? "--"
                                            : resp.data.mea58
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea21*10000 - resp.data.mea57*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "业务规则",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea23 == null
                                            ? "--"
                                            : resp.data.mea23,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea24 == null
                                            ? "--"
                                            : resp.data.mea24
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea59 == null
                                            ? "--"
                                            : resp.data.mea59,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea60 == null
                                            ? "--"
                                            : resp.data.mea60
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea23*10000 - resp.data.mea59*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "明白消费",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea25 == null
                                            ? "--"
                                            : resp.data.mea25,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea26 == null
                                            ? "--"
                                            : resp.data.mea26
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea61 == null
                                            ? "--"
                                            : resp.data.mea61,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea62 == null
                                            ? "--"
                                            : resp.data.mea62
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea25*10000 - resp.data.mea61*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "营业厅",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea29 == null
                                            ? "--"
                                            : resp.data.mea29,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea30 == null
                                            ? "--"
                                            : resp.data.mea30
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea65 == null
                                            ? "--"
                                            : resp.data.mea65,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea66 == null
                                            ? "--"
                                            : resp.data.mea66
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea29*10000 - resp.data.mea65*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "客服热线",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea31 == null
                                            ? "--"
                                            : resp.data.mea31,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea32 == null
                                            ? "--"
                                            : resp.data.mea32
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea67 == null
                                            ? "--"
                                            : resp.data.mea67,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea68 == null
                                            ? "--"
                                            : resp.data.mea68
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea31*10000 - resp.data.mea67*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },
                            {
                                name: "电子渠道",
                                num: "",
                                firstItem: {
                                    text1: "表现值",
                                    text2:
                                        resp.data.mea33 == null
                                            ? "--"
                                            : resp.data.mea33,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea34 == null
                                            ? "--"
                                            : resp.data.mea34
                                },
                                twoItem: {
                                    text1: "行业值",
                                    text2:
                                        resp.data.mea69 == null
                                            ? "--"
                                            : resp.data.mea69,
                                    text3: "排名",
                                    text4:
                                        resp.data.mea70 == null
                                            ? "--"
                                            : resp.data.mea70
                                },
                                threeItem: {
                                    text1: "领先行业",
                                    text2: Number((resp.data.mea33*10000 - resp.data.mea69*10000)/10000).toFixed(2),
                                    text3: "排名",
                                    text4: "--"
                                }
                            },

                        ]
                    }
                } else {
                    console.log("关键指标数据出错", resp)
                }
            }
        }
        function handleChangeArea(val) {
            console.log(val[0].text, val[1].text)
            state.selectData = val[0].text + val[1].text
        }
        const onConfirm = () => {
            state.showPicker = false
            console.log(state.selectData)
            if ("1" == state.type) {
                dataList1(state.selectData, state.type)
            } else if ("2" == state.type) {
                dataList2(state.selectData, state.type, "明细")
            } else if ("3" == state.type) {
                dataList3(state.selectData, state.type, "明细")
            } else {
                dataList4(state.selectData, state.type, "明细")
            }
        }
        //tab切换-传参调接口
        function tabClick(val) {
            state.active = val
            // 返回某个具有 scrollTop 属性的元素顶部
            const container = document.getElementById("scroll-container")
            NumberUtil.scrollToTop(container, 10, 10)
            if (val == 0) {
                state.type = "1"
                dataList1(state.selectData, state.type)
            } else if (val == 1) {
                state.type = "2"
                dataList2(state.selectData, state.type, "明细")
            } else if (val == 2) {
                state.type = "3"
                dataList3(state.selectData, state.type, "明细")
            } else if (val == 3) {
                state.type = "4"
                dataList4(state.selectData, state.type, "明细")
            }
        }
        onMounted(() => {
            state.columns = dataUtil.getDataTime()
            // state.selectData = moment().format("YYYY") + "第一期"
        })
        return {
            ...toRefs(state),
            getMaxDate,
            tabClick,
            selectClick,
            onDrillDown,
            onConfirm,
            handleChangeArea
        }
    }
}
</script>
<style lang="scss" scoped>
.homes {
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    overflow: hidden;
    .select-data {
        color: #000;
    }
    .tab-change {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 12px 6px 0 6px;
        font-size: 14px;
        overflow-x: auto;
        background: #ffffff;
        box-shadow: 0px 6px 6px rgba(159, 155, 155, 0.1);
        .tab-select {
            width: 160px;
            height: 25px;
            text-align: center;
            white-space: nowrap;
            margin: 0 6px;
            background: url("@/assets/select-bg.png") no-repeat 0 0;
            background-size: 100% 100%;
            color: #4e8edd;
        }
        .tab-unselect {
            width: 160px;
            height: 25px;
            text-align: center;
            white-space: nowrap;
            color: #8c8c8c;
            margin: 0 6px;
        }
    }
    .tab-change::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .content-part {
        width: 100%;
        height: calc(100% - 88px);
        overflow: auto;
        padding: 0 10px 6px 10px;
        .list-item {
            margin-top: 10px;
            .title-s {
                width: 100%;
                font-size: 13px;
                color: #333333;
                display: flex;
                flex-direction: row;
                align-items: center;
                .line {
                    display: block;
                    width: 4px;
                    height: 20px;
                    background: #007afc;
                    margin-right: 4px;
                }
            }
        }
    }
}
</style>